<template>
  <div class="app-container">
    <el-form
      ref="elForm"
      :disabled="formData.status!='audit'&&($route.query.isInfo || isInfo)"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="120px"
    >
      <h2 style="text-align: center">供应商服务评价</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <!-- supplierBaseId -->
          <el-form-item label="供应商名称" prop="supplierBaseId">
            <el-select
              v-model="formData.supplierBaseId"
              placeholder="请选择供应商"
              clearable
              @change="changeSupplier"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in supplierIdOptions"
                :key="index"
                :label="item.supplierName"
                :value="Number(item.supplierBaseId)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人" prop="person">
            <el-input
              disabled
              v-model="formData.person"
              placeholder="请输入联系人"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="phone">
            <el-input
              disabled
              v-model="formData.phone"
              placeholder="请输入联系电话"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="邮编" prop="zipCode">
            <el-input
              disabled
              v-model="formData.zipCode"
              placeholder="请输入邮编"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="传真" prop="fax">
            <el-input
              disabled
              v-model="formData.fax"
              placeholder="请输入传真"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机" prop="mobilePhone">
            <el-input
              disabled
              v-model="formData.mobilePhone"
              placeholder="请输入手机"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="供应商类型" prop="supplierType">
            <el-select
              disabled
              v-model="formData.supplierType"
              placeholder="请选择供应商类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_supplier_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商商品名称" prop="serviceName">
            <el-input
              v-model="formData.serviceName"
              placeholder="请输入供应商商品名称"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="响应情况" prop="response">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              v-model="formData.response"
              placeholder="请输入响应情况"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="formData.remark"
              type="textarea"
              placeholder="请输入备注"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="评价日期" prop="evaluateTime">
            <el-date-picker  v-model="formData.evaluateTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择评价日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="地址" prop="address">
            <el-input
              disabled
              v-model="formData.address"
              placeholder="请输入地址"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <h4
        class="form-header h4 mt30"
       
      >
      <!-- v-if="formData.qualifyCerts && formData.qualifyCerts.length > 0" -->
        供应商资质证书
        <el-button type="primary" plain size="mini" @click="handleAdd">增行</el-button>
        <el-button type="danger" plain size="mini" @click="handleDele">删行</el-button>
      </h4>
      <!--  -->
      <!-- v-if="formData.qualifyCerts && formData.qualifyCerts.length > 0" -->
      <el-table
        
        :data="formData.qualifyCerts"
        :border="true"
        style="width: 100%"
      >
        <el-table-column label="开始时间" width="300">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`qualifyCerts.${scope.$index}.startTime`"
              :rules="rules.startTime"
            >
              <el-date-picker
                v-model="scope.row.startTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择开始时间"
                clearable
              ></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="結束时间" width="300">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`qualifyCerts.${scope.$index}.endTime`"
              :rules="rules.endTime"
            >
              <el-date-picker
                v-model="scope.row.endTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择結束时间"
                clearable
              ></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column width="300" label="名称" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`qualifyCerts.${scope.$index}.certName`"
              :rules="rules.certName"
            >
              <el-input v-model="scope.row.certName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="文件" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`qualifyCerts.${scope.$index}.certUrl`"
              :rules="rules.certUrl"
            >
              <FileUpload :isDelete="!$route.query.isInfo" v-model="scope.row.certUrl"></FileUpload>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
      <!-- v-if="formData.validCerts && formData.validCerts.length > 0" -->
      <h4 class="form-header h4 mt30" >
        供应商质保书
        <el-button type="primary" plain size="mini" @click="handleAddValidCerts">增行</el-button>
        <el-button type="danger" plain size="mini" @click="handleDeleValidCerts">删行</el-button>
      </h4>
      <!--  -->
      <!--  v-if="formData.validCerts && formData.validCerts.length > 0" -->
      <el-table
        :data="formData.validCerts"
       
        :border="true"
        style="width: 100%"
      >
        <el-table-column label="开始时间" width="300">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`validCerts.${scope.$index}.startTime`"
              :rules="rules.startTime"
            >
              <el-date-picker
                v-model="scope.row.startTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择开始时间"
                clearable
              ></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="結束时间" width="300">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`validCerts.${scope.$index}.endTime`"
              :rules="rules.endTime"
            >
              <el-date-picker
                v-model="scope.row.endTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择結束时间"
                clearable
              ></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column width="300" label="名称" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`validCerts.${scope.$index}.certName`"
              :rules="rules.certName"
            >
              <el-input v-model="scope.row.certName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="文件" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`validCerts.${scope.$index}.certUrl`"
              :rules="rules.certUrl"
            >
              <FileUpload :isDelete="!$route.query.isInfo" v-model="scope.row.certUrl"></FileUpload>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
<!--  v-if="formData.businessCerts && formData.businessCerts.length > 0" -->
      <h4
        class="form-header h4 mt30"
       
      >
        营业执照
        <el-button type="primary" plain size="mini" @click="handleAddTrade">增行</el-button>
        <el-button type="danger" plain size="mini" @click="handleDeleTrade">删行</el-button>
      </h4>
      <!--  v-if="formData.businessCerts && formData.businessCerts.length > 0" -->
      <el-table
       
        :data="formData.businessCerts"
        :border="true"
        style="width: 100%"
      >
        <el-table-column label="开始时间" width="300">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`businessCerts.${scope.$index}.startTime`"
              :rules="rules.startTime"
            >
              <el-date-picker
                v-model="scope.row.startTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择开始时间"
                clearable
              ></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="結束时间" width="300">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`businessCerts.${scope.$index}.endTime`"
              :rules="rules.endTime"
            >
              <el-date-picker
                v-model="scope.row.endTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择結束时间"
                clearable
              ></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column width="300" label="名称" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`businessCerts.${scope.$index}.certName`"
              :rules="rules.certName"
            >
              <el-input v-model="scope.row.certName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="文件" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`businessCerts.${scope.$index}.certUrl`"
              :rules="rules.certUrl"
            >
              <FileUpload :isDelete="!$route.query.isInfo" v-model="scope.row.certUrl"></FileUpload>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>

      <h4 class="form-header h4 mt30" v-if="formData.oss && formData.oss.length > 0">附件信息</h4>
      <el-form-item
        v-if="formData.oss && formData.oss.length > 0"
        label
        label-width="120"
        prop="oss"
        style="margin: 0;"
      >
        <FileUploadBase :isDelete="!($route.query.isInfo || isInfo)" v-model="formData.oss"></FileUploadBase>
      </el-form-item>
      <h4 class="form-header h4 mt30">评价意见</h4>
      <el-form-item
        label="评价意见"
        label-width="120"
        prop="opinion"
        label-position="left"
        style="margin-left: 0;"
      >
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 4 }"
          v-model="formData.opinion"
          placeholder="请输入评价意见"
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>

      <el-col :span="24" v-if="btnShow">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="formData.status=='audit'||!($route.query.isInfo || isInfo)" type="primary" @click="submitForm(1)">提交</el-button>
          <!-- <el-button v-if="!($route.query.isInfo || isInfo)&&formData.status != 'end'" type="primary" @click="submitForm(0)">暂存</el-button> -->
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import {
  supplierAdd,
  updategsupplier,
  supplierInfo
} from "@/api/supplier/supplier.js";
import { selectList } from "@/api/supplier/SupplierBase.js";
export default {
  dicts: ["sys_supplier_type"],
  components: {},
  props: {
    isInfo: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ""
    },
    btnShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      supplierIdOptions: [],

      formData: {
        supplierId: undefined,
        supplierName: undefined,
        person: undefined,
        phone: undefined,
        address: undefined,
        isRecord: "0",
        isGoods: "0",
        isBusLicense: "0",
        // isInstruction: "0",
        // isMass: "0",
        effectStatus: "1",
        oss: undefined,
        busLicenseUrl: undefined,
        qualityUrl: undefined,
        qualificationsUrl: undefined,
        zipCode: undefined,
        fax: undefined,
        mobilePhone: undefined,
        supplierType: undefined,
        response: undefined,
        serviceName:undefined,
        opinion: undefined,
        qualifyCerts: [
          {
            startTime: null,
            endTime: null,
            certName: undefined,
            certTypeId: 2,
            certUrl: undefined
          }
        ],
        businessCerts: [
          {
            startTime: null,
            endTime: null,
            certName: undefined,
            certTypeId: 1,
            certUrl: undefined
          }
        ],
        validCerts: [
          {
            startTime: null,
            endTime: null,
            certName: undefined,
            certTypeId: 3,
            certUrl: undefined
          }
        ]
      },
      rules: {
        endTime: [
          {
            required: false,
            message: "请选择結束日期",
            trigger: "change"
          }
        ],
        certName: [
          {
            required: false,
            message: "请输入证书名称",
            trigger: "blur"
          }
        ],
        certUrl: [
          {
            required: false,
            message: "请上传文件",
            trigger: "change"
          }
        ],
        startTime: [
          {
            required: false,
            message: "请选择开始日期",
            trigger: "change"
          }
        ],
        opinion: [
          {
            required: true,
            message: "评价意见不能为空",
            trigger: "blur"
          }
        ],
        serviceName: [
          {
            required: true,
            message: "供应商商品名称不能为空",
            trigger: "blur"
          }
        ],
        response: [
          {
            required: true,
            message: "响应情况不能为空",
            trigger: "blur"
          }
        ],
        supplierType: [
          {
            required: false,
            message: "供应商类型不能为空",
            trigger: "change"
          }
        ],
        mobilePhone: [
          {
            required: false,
            message: "请输入手机号",
            trigger: "blur"
          },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号",
            trigger: "blur"
          }
        ],
        fax: [
          {
            required: false,
            message: "传真不能为空",
            trigger: "blur"
          }
        ],
        zipCode: [
          {
            required: false,
            message: "邮编不能为空",
            trigger: "blur"
          }
        ],
        oss: [
          {
            required: false,
            message: "附件不能为空",
            trigger: "change"
          }
        ],
        qualityUrl: [
          {
            required: false,
            message: "质保书不能为空",
            trigger: "change"
          }
        ],
        qualificationsUrl: [
          {
            required: false,
            message: "资质证书不能为空",
            trigger: "change"
          }
        ],
        busLicenseUrl: [
          {
            required: true,
            message: "营业执照不能为空",
            trigger: "change"
          }
        ],

        supplierName: [
          {
            required: true,
            message: "请输入供应商名称",
            trigger: "blur"
          }
        ],
        person: [
          {
            required: false,
            message: "请输入联系人",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: false,
            message: "请输入联系电话",
            trigger: "blur"
          }
        ],
        address: [
          {
            required: false,
            message: "请输入地址",
            trigger: "blur"
          }
        ],
        isRecord: [
          {
            required: true,
            message: "有无备案不能为空",
            trigger: "change"
          }
        ],
        isGoods: [
          {
            required: true,
            message: "供货情况不能为空",
            trigger: "change"
          }
        ],
        isBusLicense: [
          {
            required: true,
            message: "营业执照不能为空",
            trigger: "change"
          }
        ],
        isInstruction: [
          {
            required: true,
            message: "产品说明书不能为空",
            trigger: "change"
          }
        ],
        isMass: [
          {
            required: true,
            message: "产品质量证明不能为空",
            trigger: "change"
          }
        ],
        effectStatus: [
          {
            required: true,
            message: "是否启用不能为空",
            trigger: "change"
          }
        ]
      }
    };
  },
  computed: {},
  created() {
    if (this.$route.query.idBase) {
      this.formData.supplierBaseId = Number(this.$route.query.idBase);
    }
    console.log(this.formData.supplierBaseId);
    this.selectList();

    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
      this.getinfo();
    }
  },
  mounted() {},
  methods: {
    changeSupplier(e) {
      let row = this.supplierIdOptions.find(
        i => i.supplierBaseId == this.formData.supplierBaseId
      );
      console.log(row);
      if (row) {
        this.formData.supplierName = row.supplierName;
        this.formData.fax = row.fax;
        this.formData.person = row.person;
        this.formData.zipCode = row.zipCode;
        this.formData.mobilePhone = row.mobilePhone;
        this.formData.phone = row.phone;
        this.formData.address = row.address;

        this.formData.person = row.person;
        this.formData.supplierType = row.supplierType;
      } else {
        this.formData.supplierName = undefined;
        this.formData.person = undefined;
        this.formData.zipCode = undefined;
        this.formData.mobilePhone = undefined;
        this.formData.person = undefined;
      }
    },
    /** 查询供应商下拉树结构 */
    selectList() {
      selectList({ effectStatus: 1 }).then(response => {
        this.supplierIdOptions = response.data;
        let row = this.supplierIdOptions.find(
          i => i.supplierBaseId == this.formData.supplierBaseId
        );
        if (row) {
          this.formData.supplierName = row.supplierName;
          this.formData.fax = row.fax;
          this.formData.person = row.person;
          this.formData.zipCode = row.zipCode;
          this.formData.mobilePhone = row.mobilePhone;
          this.formData.phone = row.phone;
          this.formData.address = row.address;

          this.formData.person = row.person;
          this.formData.supplierType = row.supplierType;
        } else {
          this.formData.supplierName = undefined;
          this.formData.person = undefined;
          this.formData.zipCode = undefined;
          this.formData.mobilePhone = undefined;
          this.formData.person = undefined;
        }
      });
    },
    handleAdd() {
      this.formData.qualifyCerts.push({
        startTime: null,
        endTime: null,
        certName: undefined,
        certTypeId: 2,
        certUrl: undefined
      });
    },
    // 营业执照增行
    handleAddTrade() {
      this.formData.businessCerts.push({
        startTime: null,
        endTime: null,
        certName: undefined,
        certTypeId: 2,
        certUrl: undefined
      });
    },
    // 营业执照删行
    handleDeleTrade() {
      if (this.formData.businessCerts.length == 1) return;
      this.formData.businessCerts.pop();
    },
    handleDele() {
      if (this.formData.qualifyCerts.length == 1) return;
      this.formData.qualifyCerts.pop();
    },
    handleAddValidCerts() {
      this.formData.validCerts.push({
        startTime: null,
        endTime: null,
        certName: undefined,
        certTypeId: 2,
        certUrl: undefined
      });
    },
    handleDeleValidCerts() {
      if (this.formData.validCerts.length == 1) return;
      this.formData.validCerts.pop();
    },

    getinfo() {
      return supplierInfo(this.$route.query.id || this.id).then(response => {
        this.formData = response.data;
        this.formData.supplierBaseId = Number(response.data.supplierBaseId);
        console.log(this.supplierIdOptions);
        console.log(this.formData);
        if(!this.formData.qualifyCerts){
          this.formData.qualifyCerts = [
            {
              startTime: null,
              endTime: null,
              certName: undefined,
              certTypeId: 2,
              certUrl: undefined
            }
          ];
        }
        if(!this.formData.businessCerts){
          this.formData.businessCerts = [
            {
              startTime: null,
            endTime: null,
            certName: undefined,
            certTypeId: 1,
            certUrl: undefined
            }
          ];
        }
        if(!this.formData.validCerts){
          this.formData.validCerts = [
            {
              startTime: null,
            endTime: null,
            certName: undefined,
            certTypeId: 3,
            certUrl: undefined
            }
          ];
        }
      });
    },
    submitForm(e) {
      let query = JSON.parse(JSON.stringify(this.formData));
      if (query.status != 'end') {
        query.status = e == 0 ? 'draft' : 'audit'
      }
      if (e == 0) {
        if (!this.formData.supplierBaseId) {
          this.$message.warning("请先选择购置编号");
          return;
        }
        if (this.formData.supplierId != undefined) {
            updategsupplier(query).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            supplierAdd(query).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        return
      }
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          if (this.formData.supplierId != undefined) {
            updategsupplier(query).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            supplierAdd(query).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    }
  }
};
</script>
<style scoped lang="scss">
.mt30 {
  margin-top: 30px;
}
</style>
